<script setup>
import commonProblem from './commonProblem.vue';
import { useI18nStore } from '@/stores/index.js';
const i18nStore = useI18nStore();
</script>

<template>
  <div class="help">
    <!-- 头部导航 -->
    <div class="auto md:max-w-[1200px] mobile:text-4xl mobile:px-10">
      <Nav />
    </div>

    <!-- 标语搜索框 -->
    <div class="title auto pc:max-w-[1000px] text-center mobile:px-10">
      <h1 class="mt-[60px] mb-[10px] text-[52px] font-bold">
        {{ i18nStore.translate('index170') }}
      </h1>
      <p class="text-[#666666] text-[16px] mb-[50px]">
        {{ i18nStore.translate('index171') }}
      </p>
    </div>

    <div class="menu auto max-w-[1000px] mobile:px-10">
      <ul
        class="mt-[50px] flex pc:justify-between flex-wrap mobile:justify-evenly"
      >
        <li
          class="border mobile:w-[320px] lg:w-[320px] pc:max-w-[320px] p-[30px] rounded-2xl mb-[50px]"
          v-for="i in 6"
          :key="i"
        >
          <div class="icon w-[50px] h-[55px] mb-[40px]">
            <img src="@/assets/index/ren.png" alt="" />
          </div>
          <div class="title text-2xl font-bold leading-10">一级菜单文案</div>
          <ul>
            <li class="text-xl text-[#666] leading-10">二级菜单文案</li>
            <li class="text-xl text-[#666] leading-10">二级菜单文案</li>
            <li class="text-xl text-[#666] leading-10">二级菜单文案</li>
          </ul>
          <router-link to="/helpMenu">
            <div class="herf leading-10 text-xl font-bold">
              {{ i18nStore.translate('index172')
              }}<i class="pi pi-arrow-right ml-5 align-middle" style=""></i>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 常见问题 -->
    <div class="auto md:max-w-[1000px] mobile:px-10">
      <commonProblem />
    </div>

    <div class="banner mt-[60px]">
      <Banner
        :title="i18nStore.translate('index144')"
        :button="i18nStore.translate('index145')"
        to="register"
      />
    </div>

    <!-- 底部栏 -->
    <div class="foot auto md:max-w-[1200px] mobile:px-10">
      <Foot />
    </div>
  </div>
</template>

<style scoped lang="scss">
.auto {
  margin: 0 auto;
}
</style>
